$sidebar-width: 240px;

.sidebar {
    position: fixed;
    z-index: 10;
    top: 50px;
    left: 0;
    bottom: 0;

    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid $clr-border;
}

    .sidebar-inner {
        width: $sidebar-width;
        padding: 10px 0;

        h3 {
            margin: 10px 0 0 0;
            font-size: 1.6rem;

            a {
                padding: 10px 30px;
                color: $clr-head;
            }
        }

        h4 {
            font-size: 1.4rem;
        }

        ol {
            padding-left: 0;

            ol a {
                padding-left: 50px;
            }

            ol ol a {
                padding-left: 70px;
            }
        }

            li {
                list-style: none;

                a {
                    padding-top: 3px;
                    padding-bottom: 3px;
                }

                li a {
                    padding-top: 2px;
                    padding-bottom: 2px;
                }
            }

        a {
            display: inline-block;
            width: 100%;
            color: $clr-text;
            padding-left: 30px;
            transition-property: color, background;

            &:hover {
                margin-right: -2px;
                color: $clr-head;
                text-decoration: none;
                background: $clr-bg-primary;
                border-right: 2px solid $clr-primary;
            }

            &.active {
                color: $clr-primary;
            }
        }

        hr {
            margin: 5px 0;
        }

        .primary {
            color: $clr-head;
        }
    }
